<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>个人资料</title>
    <style>
        body {
            background-color: #f1f1f1;
            margin: 10px 0 0 0;
        }
        .list {
            background-color: #ffffff;
            height: 40px;
            width: 100%;
            position: relative;
            text-align: center;
            border-bottom: 1px solid #bfbfbf4f;
            line-height: 40px;
        }

        .key {
            float: left;
            /*width: 25%;*/
            font-size: 16px;
            text-align: left;
        }

        .value {
            width: 100%;
            font-size: 14px;
            text-align: end;
            color: #a5a5a5;
        }

        .bean {
            background-color: #2e6da4;
            color: #ffffff;
            margin: 3%;
            padding: 2.5% 3%;
            font-size: 15px;
            border-radius: 17px;
        }

        input[type="button"] {
            -webkit-appearance: none;
        }

    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="js/alert.js"></script>
</head>
<body style="background-color: #fefefe">
<div>
    <img src="img/grxxh.jpg" style="width: 100%;margin-bottom: -124%;margin-top: -20%;">
</div>

<div style="background-color: #ffffff">
    <div style="margin: 0 2% 0 2%">
        <div class="list">
            <img class="key" src="img/grkh.png" style="width: 5%; margin-top: 2.5%; margin-right: 1.5%;">
            <div class="key">会员卡号</div>
            <div id="phone" class="value"></div>
        </div>
        <div class="list" onclick="toup('姓名')">
            <img class="key" src="img/grxm.png" style="width: 5%; margin-top: 2.5%; margin-right: 1.5%;">
            <div class="key">姓名</div>
            <div id="name" class="value"><i class="fa fa-angle-double-right"></i></div>
        </div>

        <div class="list" onclick="togender()">
            <img class="key" src="img/grxb.png" style="width: 5%; margin-top: 2.5%; margin-right: 1.5%;">
            <div class="key">性别</div>
            <div id="gender" class="value"><i class="fa fa-angle-double-right"></i></div>
        </div>

        <div class="list" onclick="toup('生日')">
            <img class="key" src="img/grsr.png" style="width: 5%; margin-top: 2.5%; margin-right: 1.5%;">
            <div class="key">生日</div>
            <div id="birthday" class="value"><i class="fa fa-angle-double-right"></i></div>
        </div>
    </div>

    <div style="height: 20px;width: 100%;background-color: #f1f1f1"></div>

    <div style="margin: 0 2% 0 2%" id="data">

       <!-- <div class="list">
            <div class="key">从事的职业</div>
            <div class="value">完善后奖励<span style="color:red;">5</span>积分 <i class="fa fa-angle-double-right"
                                                                           style="margin-left: 9px;font-size: 20px"></i>
            </div>
        </div>

        <div class="list">
            <div class="key">个人喜好</div>
            <div class="value">完善后奖励<span style="color:red;">5</span>积分 <i class="fa fa-angle-double-right"
                                                                           style="margin-left: 9px;font-size: 20px"></i>
            </div>
        </div>

        <div class="list">
            <div class="key">身高</div>
            <div class="value">完善后奖励<span style="color:red;">5</span>积分 <i class="fa fa-angle-double-right"
                                                                           style="margin-left: 9px;font-size: 20px"></i>
            </div>
        </div>
        <div class="list">
            <div class="key">体重</div>
            <div class="value">完善后奖励<span style="color:red;">5</span>积分
                <i class="fa fa-angle-double-right" style="margin-left: 9px;font-size: 20px"></i>
            </div>
        </div>-->
    </div>
</div>
<!--修改信息框-->
<div id="updata"
     style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.70);position: fixed;z-index: 9999;top: 0;display: none">
    <div id="window"
         style="position: fixed;width: 100%;height: 140px;text-align: center;background-color: #fff;top: 36%;">
        <span id="up-type">value:</span> <input type="text" id="up-value"
                                                style="border: 0;border-bottom: 1px solid black;margin-top: 5%;width: 75%;height: 25%;font-size: 20px;text-align: center;">
        <input type="button" value="确定" id="bt-data"
               style="color: #fff;width: 55%;font-size: 18px;margin-top: 5%;border: 0;border-radius: 5px;height: 40px;background: #3F51B5;">
    </div>
    <div style="text-align: center;color: #ffffff;margin-top: 130%;height: 100px;" onclick="exit_bean()">
        <i class="fa fa-times-circle-o" style="font-size:46px;"></i>
    </div>
</div>
<!--性别-->
<div id="upgender"
     style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.70);position: fixed;z-index: 9999;top: 0;display: none">
    <div style="position: fixed;width: 100%;height: 130px;text-align: center;background-color: #fff;top: 36%;">
        <div style="margin-top: 5%;">
            <span>性别:</span>
            <span style="margin-left: 5%;">
            <input type="radio" name="gender" value="男" id="gender-m">
            <label for="gender-m">男</label>
        </span>
            <span style="margin-left: 3%;">
            <input type="radio" name="gender" value="女" id="gender-w">
            <label for="gender-w">女</label>
        </span>
        </div>
        <input type="button" value="确定" id="bt-data-gender" onclick="updatagender()"
               style="color: #fff;width: 55%;font-size: 18px;margin-top: 5%;border: 0;border-radius: 5px;height: 40px;background: #3F51B5;">
    </div>
    <div style="text-align: center;color: #ffffff;margin-top: 130%;height: 100px;" onclick="exit_bean()">
        <i class="fa fa-times-circle-o" style="font-size:46px;"></i>
    </div>
</div>

<!--标签选择-->
<div id="tags"
     style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.70);position: fixed;z-index: 9999;top: 0;display: none">
    <div style="text-align: center;margin-top: 16%">
        <div style="color: #FFF">请选择</div>
        <hr style="width: 90%;border: none;border-top: 1px solid #ffffff;">

        <div id="tagsbean"
             style="background-color: rgba(255,255,255,0);padding: 2% 5%;height: 300px;text-align: center">
            <span class="bean">豆豆</span>
            <span class="bean">豆豆</span>
            <span class="bean">豆豆</span>
            <span class="bean">豆豆</span>
        </div>

        <div style="text-align: center">
            <input type="button" value="确定" id="bt-tags" onclick="makeTags()"
                   style="background-color: rgba(255,255,255,0);border: 1px solid #fff;color: #fff;width: 25%;height: 30px;">
        </div>
        <div style="text-align: center;color: #ffffff;margin-top: 10%" onclick="exit_bean()">
            <i class="fa fa-times-circle-o" style="font-size:46px;"></i>
        </div>
    </div>
</div>

</body>
<script src="js/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        getphone();
        showdata()
    });

    function showdata() {
        $.ajax({
            "url": "/complement/vipshow/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                $("#data").empty();
                if (json.state == 200) {

                    for (var i = 0; i < json.data.length; i++) {
                        var map = json.data[i];
                        var html = '<div class="list" onclick="totags(\'#{id}\',\'#{tagsid}\',\'#{tags}\')">' +
                            '<div class="key">#{name}</div>';

                        if (map.usa != "Y") {
                            html += '<div class="value">完善后奖励<span style="color:red;">#{award}</span>积分 <i class="fa fa-angle-double-right" style="margin-left: 9px;font-size: 20px"></i></div>';
                        }else {
                            html += '<div class="value"><i class="fa fa-angle-double-right" style="margin-left: 9px;font-size: 20px"></i></div>';
                        }
                        html += '</div>';
                        html = html.replace("#{tagsid}", map.codeId);
                        html = html.replace("#{id}", map.id);
                        html = html.replace("#{name}", map.name);
                        html = html.replace("#{tags}", map.code);
                        html = html.replace("#{award}", map.award);

                        $("#data").append(html);
                    }
                }
            }
        })
    }

    var TAGSBEAN;
    var TAGSID;
    var COMPLEMENT;//记录id

    $("div").delegate(".bean", "click", function () {

        $(this).css("background", "#000");
        $(this).siblings().css("background", "#2e6da4");
        TAGSBEAN = $(this).html();

    });

    function totags(id, tagsid, tags) {
        TAGSID = tagsid;
        TAGSBEAN = "";
        COMPLEMENT = id;
        $("#tags").css("display", "inline");
        getTagsItem(tags);

    }

    function makeTags() {
        $.ajax({
            "url": "/complement/maketags/",
            "data": "VipAttrib" + TAGSID + "=" + TAGSBEAN + "&cid=" + COMPLEMENT,
            "type": "POST",
            "success": function (json) {
                if (json.state == 200) {
                    alert("设置成功");
                    location.reload()
                } else {
                    alert(json.message)
                }
            }
        })
    }

    function getTagsItem(tags) {
        $("#tagsbean").empty();
        $.ajax({
            "url": "/complement/tagsitem/",
            "data": "code=" + tags,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    for (var i = 0; i < json.data.length; i++) {
                        $("#tagsbean").append("<span class=\"bean\">" + json.data[i] + "</span>");
                    }
                }
            }
        })
    }

    function togender() {
        $("#upgender").css("display", "inline");
    }

    function toup(key) {
        $("#updata").css("display", "inline");
        $("#bt-data").attr("onclick", "updata('" + key + "')");
        $("#up-type").html(key + ":");
    }

    function updatagender() {
        var value = $('input:radio[name="gender"]:checked').val();
        if (value == null) {
            alert("请选择性别");
            return
        }
        $.ajax({
            "url": "/complement/vipmod/",
            "data": "gender=" + value,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    alert("修改成功");
                    $("#upgender").css("display", "none");
                } else {
                    alert(json.message);
                }
            }
        })
    }

    function updata(key) {
        var value = $("#up-value").val();
        if (value == null) {
            alert("请输入内容");
            return
        }
        if (key==="姓名") {
            key='name'
        }
        if (key==="生日") {
            key='birthday'
        }
        $.ajax({
            "url": "/complement/vipmod/",
            "data": key + "=" + value,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    alert("修改成功");
                    $("#updata").css("display", "none");
                } else {
                    alert(json.message);
                }
            }
        })
    }

    function getphone() {
        $.ajax({
            "url": "/complement/getphone/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    $("#phone").html(json.data);
                }
            }
        })
    }
</script>
<script>

    function exit_bean() {
        $("#tags").css("display", "none");
        $("#updata").css("display", "none");
        $("#upgender").css("display", "none");
    }

</script>

</html>